<template>
  <div class="echarts h-auto">
    <ECharts
      v-if="option"
      :option="option"
      :id="`Line` + props.id"
      ref="lineEChartsRef"
    />
  </div>
</template>

<script lang="ts" setup>
// import { getPieces } from "../index";
import Big from "big.js";
const props = defineProps({
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  showName: {
    type: Boolean,
    default: true,
  },
  // 曲线x轴/y轴数据
  seriesData: {
    type: Object,
    default: () => {
      return {
        paramName: "Journal C-Diameter (bottom)",
        upperLimitValue: 515,
        lowerLimitValue: 280,
        controlDown: 290,
        controlUp: 490,
        parameterStandards: 350,
        xdataIndex: [
          "1",
          "2",
          "4",
          "6",
          "8",
          "10",
          "12",
          "14",
          "16",
          "18",
          "20",
        ],
        xdata: [
          "2024-01-11 12:00",
          "2024-01-11 12:02",
          "2024-01-11 12:04",
          "2024-01-11 12:06",
          "2024-01-11 12:08",
          "2024-01-11 12:10",
          "2024-01-11 12:12",
          "2024-01-11 12:14",
          "2024-01-11 12:16",
          "2024-01-11 12:18",
          "2024-01-11 12:20",
        ],
        ydata: [250, 380, 515, 243, 280, 500, 280, 540, 243, 280, 260],
      };
    },
  },
});
const { seriesData, showName } = toRefs(props);
const option = ref();
const lineEChartsRef = ref();

// 折线图数据变更
watch(
  () => seriesData.value,
  (newVal) => {
    setTimeout(() => {
      setOptions();
    }, 10);
  },
  {
    deep: true,
    immediate: true,
  }
);
// 计算y轴最小值
function computedMin(minValue: number) {
  console.log("minValue", minValue, seriesData.value.lowerLimitValue);
  if (seriesData.value.lowerLimitValue < minValue) {
    return seriesData.value.lowerLimitValue - 0.01;
  } else {
    return minValue;
  }
}
// 计算y轴最大值
function computedMax(maxValue: number) {
  if (seriesData.value.upperLimitValue < maxValue) {
    return maxValue;
  } else {
    return seriesData.value.upperLimitValue;
  }
}

// // 计算y轴最小值
// function computedMin(minValue: number) {
//   // console.log("minValue", minValue, new Big(minValue).times(0.2).toString());

//   if (minValue) {
//     if (minValue == 0) {
//       return minValue;
//     } else {
//       return new Big(minValue).minus(new Big(minValue).times(0.2)).toFixed(4);
//     }
//   } else {
//     return "";
//   }
//   // if (seriesData.value.lowerLimitValue < minValue) {
//   //   return seriesData.value.lowerLimitValue - 0.01;
//   // } else {
//   // return minValue;
//   // }
//   return minValue;
// }

// // 计算y轴最大值
// function computedMax(maxValue: number) {
//   // console.log("maxValue", maxValue, new Big(maxValue).times(0.2).toString());
//   // console.log(new Big(maxValue).plus(new Big(maxValue).times(0.2)).toString());
//   if (maxValue) {
//     return new Big(maxValue).plus(new Big(maxValue).times(0.2)).toFixed(4);
//   } else {
//     return "";
//   }

//   // if (seriesData.value.upperLimitValue < maxValue) {
//   //   return maxValue;
//   // } else {
//   //   return seriesData.value.upperLimitValue;
//   // }
//   // return
//   return maxValue;
// }

function setOptions() {
  option.value = {
    animation: true,
    // animationDuration: 3 * 100,
    color: ["#4A95FF", "rgb(45, 93, 231)", "#15b3ff", "rgb(69,108,244)"],
    tooltip: {
      trigger: "axis",
      formatter: function (value: any) {
        return `第${value[0].axisValueLabel}个节点&nbsp;<br /> 检测时间： ${
          seriesData.value.xdata[value[0].dataIndex]
        }<br />${value[0].marker}&nbsp; ${Number(value[0].data).toFixed(
          4
        )}<br /> 轴号：${
          seriesData.value.lastList[value[0].dataIndex].partQrCode
        }<br /> 检具编号：${
          seriesData.value.lastList[value[0].dataIndex].gageEquipMarkName
        }`;
      },
      textStyle: {
        align: "left",
        fontSize: 13,
        fontFamily: "DINAlt",
        lineHeight: 30,
      },
    },
    grid: {
      left: "10",
      top: "50",
      right: 10,
      height: "auto",
      // minHeight: 400, // 单位为像素
      bottom: "5%",
      containLabel: true,
    },
    title: {
      text: seriesData.value.paramName || "",
      textStyle: {
        align: "center",
        fontSize: 14,
        fontFamily: "DINLight",
      },
      top: "4%",
      left: "center",
    },
    xAxis: {
      type: "category",
      data: seriesData.value.xdataIndex || [],
      axisLabel: {
        interval: "auto", // 坐标刻度之间的显示间隔，默认就可以了
        // rotate: 38, // 调整数值改变倾斜的幅度（范围-90到90）
        fontSize: 12,
        fontFamily: "DINLight",
      },
      axisTick: {
        alignWithLabel: true, // true：标签位于刻度线正下方；false：标签位于2个刻度线中间
      },
    },
    yAxis: {
      type: "value", // 坐标轴类型:数值轴
      // name: "湿度", // 坐标轴名称
      boundaryGap: false,
      // scale: true,
      // min: function (value: any) {
      //   return value ? computedMin(value.min) : "";
      // },
      // max: function (value: any) {
      //   return value ? computedMax(value.max) : "";
      // },
      min: function (value: any) {
        return computedMin(value.min);
      },
      max: function (value: any) {
        return computedMax(value.max);
      },
      position: "left", // 坐标轴位置:左侧
      // axisLabel: {
      //   interval: "auto", // 坐标刻度之间的显示间隔，默认就可以了
      //   // 调整数值改变倾斜的幅度（范围-90到90）
      // },
      // interval: "auto", // 坐标轴刻度间隔(当前被注释掉)
      offset: 0, // 坐标轴相对于默认位置的偏移:无偏移
      axisLine: {
        show: true, // 是否显示坐标轴线
        lineStyle: {
          color: "#6e7079", // 坐标轴线颜色:使用颜色数组的第一个颜色
        },
      },
      axisLabel: {
        fontSize: 12,
        fontFamily: "DINLight",
        // 自定义标签显示：当布尔类型图表，则显示 true or false
        formatter: function (value: number) {
          return Big(value).round(4);
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true, // 是否显示分隔线
        lineStyle: {
          type: "dotted", // 分隔线类型:点线
        },
      },
    },
    dataZoom: [
      // {
      //   type: "slider", // 滑动条型数据区域缩放
      //   start: 0,
      //   end: 100,
      // },
      // {
      //   type: "inside", // 内置型数据区域缩放
      //   start: 0,
      //   end: 100,
      // },
    ],
    series: {
      name: `${seriesData.value.paramName || ""}`,
      type: "line",
      data: seriesData.value.ydata || [],
      // label: {
      //   // 自定义标签显示：当布尔类型图表，则显示 true or false
      //   formatter: function (obj: any) {
      //     obj.value;
      //     // console.log(obj);
      //   },
      // },
      markLine: {
        // silent: false,
        data: [
          {
            name: "",
            yAxis: `${seriesData.value?.parameterStandards}`,
            lineStyle: {
              color: "#3ae374",
              type: "dashed",
              width: 1,
            },
            label: {
              show: false,
              position: "end",
              formatter: "公称尺寸",
            },
          },
          {
            name: "",
            yAxis: `${seriesData.value?.upperLimitValue}`,
            lineStyle: {
              color: "rgb(248, 113, 113)",
              type: "dashed",
              width: 1,
            },
            label: {
              show: false,
              position: "end",
              formatter: "公差上限",
            },
          },
          {
            name: "",
            yAxis: `${seriesData.value?.lowerLimitValue}`,
            lineStyle: {
              color: "rgb(248, 113, 113)",
              type: "dashed",
              width: 1,
            },
            label: {
              show: false,
              position: "end",
              formatter: "公差下限",
            },
          },
          {
            name: "",
            yAxis: `${seriesData.value?.controlUp}`,
            lineStyle: {
              color: "#ffd300",
              type: "dashed",
              width: 1,
            },
            label: {
              show: false,
              position: "end",
              formatter: "控制线上限",
            },
          },
          {
            name: "",
            yAxis: `${seriesData.value?.controlDown}`,
            lineStyle: {
              color: "#ffd300",
              type: "dashed",
              width: 1,
            },
            label: {
              show: false,
              position: "end",
              formatter: "控制线下限",
            },
          },
        ],
        symbol: "none",
      },
      symbol: "circle",
      symbolSize: 6,
      lineStyle: {
        width: 1.5,
      },
      // itemStyle: {
      //   normal: {
      //     // 定义点的颜色
      //     color: function (params) {
      //       // params是当前点的信息，可以根据条件返回不同的颜色
      //       if (
      //         params.value >= seriesData.value.upperLimitValue ||
      //         params.value <= seriesData.value.lowerLimitValue
      //       ) {
      //         return "#f56c6c"; // 如果值大于1000，点的颜色为红色
      //       } else if (
      //         params.value >= seriesData.value.controlUp ||
      //         params.value <= seriesData.value.controlDown
      //       ) {
      //         console.log(params.value, params);
      //         return "#ffd300"; // 否则为绿色
      //       } else {
      //         return "#4A95FF"; // 否则为绿色
      //       }
      //     },
      //   },
      // },
    },
    visualMap: [
      {
        show: false,
        pieces: getPieces(seriesData.value),
        seriesIndex: 0,
      },
    ],
  };
}

function getPieces(seriesData: any) {
  if (
    seriesData.lowerLimitValue != null &&
    seriesData.upperLimitValue != null &&
    seriesData.controlDown != null &&
    seriesData.controlUp != null
  ) {
    return [
      {
        lte: seriesData.lowerLimitValue,
        color: "#ee5253",
      },
      {
        gte: seriesData.upperLimitValue,
        color: "#ee5253",
      },
      {
        lte: seriesData.controlDown,
        gt: seriesData.lowerLimitValue || null,
        color: "#ffd300",
      },
      {
        lt: seriesData.upperLimitValue || null,
        gte: seriesData.controlUp,
        color: "#ffd300",
      },
      {
        lt: seriesData.controlUp,
        gt: seriesData.controlDown,
        color: "#3ae374",
      },
    ];
  } else if (
    seriesData.lowerLimitValue != null &&
    seriesData.upperLimitValue != null &&
    seriesData.controlDown == null &&
    seriesData.controlUp == null
  ) {
    return [
      {
        lte: seriesData.lowerLimitValue,
        color: "#ee5253",
      },
      {
        gte: seriesData.upperLimitValue,
        color: "#ee5253",
      },
      {
        lt: seriesData.upperLimitValue,
        gt: seriesData.lowerLimitValue,
        color: "#3ae374",
      },
    ];
  }
}

onMounted(() => {});
</script>

<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 300px;
}

.echarts:nth-last-child(1) {
  border-bottom: none !important;
}
</style>
